<template>
    <div class="industryBox">
        <!-- header -->
        <div class="raiders-header">
            <div class="header-left">
                <h2>{{entryType}}</h2> 
                <div class="header-line"></div>
            </div>
            <div class="header-right">
                <input type="text" placeholder="关键词搜索" v-model="wordSearch">
                <img src="../../static/image/icon-search.png" alt="" class="search-icon" @click="search">
            </div>
        </div>
        <!-- header end-->

        <div class="contentBox clear">
            <table>
                <thead>
                    <tr>
                        <th class="table-left">名词</th>
                        <th class="table-right">解释</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="2" style="text-align: center;">暂无数据</td>
                    </tr>
                    <tr class="data-tr" v-for="(item,index) in tableList" :key="item.id" v-if="tableList.length!=0">
                        <td class="table-left purple">{{index+1+((currentPage - 1) * pageSize)}}、{{item.name}}</td>
                        <td class="table-right">
                            <div class="msg"  v-if="item.explaination">
                                {{item.fold ? maxSlice(item.explaination) : item.explaination   }}
                            </div>

                            <!-- 查看 -->
                            <div class="seeBox" v-show=" item.explaination.length > maxLength ">
                                <div class="show" @click="item.fold = false" v-show="item.fold">展开全文<img src="../../static/image/down.png" alt=""></div>
                                <div class="show" @click="item.fold = true" v-show="!item.fold">收起全文<img src="../../static/image/up.png" alt=""></div>
                                
                                
                            </div>
                           <!-- 查看 end-->
                            
                        </td>
                    </tr>
                </tbody>
            </table>
            <!-- page -->
            <el-pagination v-if="tableList.length!=0" background layout="prev, pager, next" :page-size="pageSize" :total="toolsDataTotal" @current-change="handleCurrentChange"></el-pagination>
            <!-- page end-->
        </div>
        
    </div>
</template>
<script>
    export default {
        data(){
            return{
                // 词条字最大数
                maxLength:50,
                entryType:'',
                // 关键词搜索
                wordSearch:'',
                // 总条数
                toolsDataTotal:0,
                tableList:[],
                // 记录当前页
                currentPage:1,
                // 每页显示数据条数（写死的）
                pageSize:20
            }
        },
        methods:{
            getAllData:function(currentPage = 1){
                let data = {
                   // id:this.$router.params.id,
                    // 词条类型
                    entryType: this.$route.params.id,
                    // 当前页数
                    pageNow:currentPage,
                    // 每页显示数据条数
                    pageSize:this.pageSize,

                }
                this.$http.entryList(data,(res)=>{
                    // 阅读全文
                    for(var i = 0; i < res.data.entryList.length; i++){
                        res.data.entryList[i].fold = true;
                    }
                    
                    this.tableList = res.data.entryList;
                    this.toolsDataTotal = res.data.count;
                    this.entryType = res.data.entryType;
                    console.log(res);
                    console.log("总条数：" + this.toolsDataTotal)
                },(errRes) =>{
                    console.log(errRes)
                })
            },

            // 当前页事件
            handleCurrentChange:function(currentPage){
                console.log(currentPage)
                this.currentPage = currentPage
                this.getAllData(currentPage)
            },
            // search
            search:function(){
                this.$router.push({ path: '/search-terms', query: { name: this.wordSearch }})
                
            },
            
            // 阅读全文
            maxSlice(v){
                return v.length > this.maxLength ?v.slice(0, this.maxLength) + '...' : v;
            }
        },
        
        mounted(){
            console.log(this.$route.name)
            this.getAllData();
        }
    }
</script>

